<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>黑猪后台管理系统</title>
  <link rel="shortcut icon" href="favicon.gif">
  <!---CSS Files-->
  <link rel="stylesheet" href="../static/css/master.css">
  <!---jQuery Files-->
  <script src="../static/js/jquery-1.7.1.min.js"></script>
  <script src="../static/js/jquery-ui-1.8.17.min.js"></script>
  <script src="../static/js/styler.js"></script>
  <script src="../static/js/jquery.tipTip.js"></script>
  <script src="../static/js/colorpicker.js"></script>
  <script src="../static/js/sticky.full.js"></script>
  <script src="../static/js/global.js"></script>
  <script src="../static/js/flot/jquery.flot.min.js"></script>
  <script src="../static/js/flot/jquery.flot.pie.min.js"></script>
  <script src="../static/js/flot/jquery.flot.resize.min.js"></script>
  <!---Fonts-->
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <!--[if lte IE 8]>
  <script language="javascript" type="text/javascript" src="../static/js/flot/excanvas.min.js"></script>
  <![endif]-->

  <style>
    #fenye {
      text-align: center;
    }
    /* 弹窗样式 */
    .modal {
      display: none; /* 默认隐藏 */
      position: fixed; /* 固定位置 */
      z-index: 1; /* 在顶层 */
      padding-top: 100px; /* 离顶部的距离 */
      left: 0;
      top: 0;
      width: 100%; /* 宽度全屏 */
      height: 100%; /* 高度全屏 */
      overflow: auto; /* 启用滚动 */
      background-color: rgb(0,0,0); /* 黑色背景 */
      background-color: rgba(0,0,0,0.4); /* 黑色背景，半透明 */
    }

    /* 表单样式 */
    .modal-content {
      background-color: #fefefe;
      margin: auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%; /* 宽度80% */
    }

    /* 关闭按钮样式 */
    .close-button {
      position: absolute;
      top: 15px;
      right: 35px;
      cursor: pointer;
    }
  </style>
</head>
<body>

<!--- HEADER -->

<div class="header">
  <a href="dashboard.html"><img src="../static/img/logo.png" alt="Logo" /></a>
  <div class="styler">
    <ul class="styler-show">
      <li><div id="colorSelector-top-bar">今天也要</div></li>
      <li><div id="colorSelector-box-head">努力哦</div></li>
    </ul>
  </div>
</div>

<div class="top-bar">
  <ul id="nav">
    <li id="user-panel">
      <img src="../static/img/nav/usr-avatar.jpg" id="usr-avatar" alt="" />
      <div id="usr-info">
        <p id="usr-name">欢迎 回来, {{.user.Username}}</p>
        <p id="usr-notif"> <a href="#"></a></p>
        <p><a href="#" onclick="document.getElementById('myMessage').style.display='block'">用户基本信息</a><a href="/quitLogin">退出登录</a></p>
      </div>
    </li>
    <li>
      <ul id="top-nav">
        <!--         <li class="nav-item">-->
        <!--           <a href="dashboard.html"><img src="img/nav/dash.png" alt="" /><p>Dashboard</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="#"><img src="img/nav/anlt-active.png" alt="" /><p>Analytics</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="tables.html"><img src="img/nav/tb.png" alt="" /><p>Tables</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="calendar.html"><img src="img/nav/cal.png" alt="" /><p>Calendar</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="widgets.html"><img src="img/nav/widgets.png" alt="" /><p>Widgets</p></a>-->
        <!--         </li>-->
          <li class="nav-item">
            <a href="/toIndex"><img src="../static/img/nav/typ.png" alt="" /><p>数据分析预览</p></a>
          </li>
          <li class="nav-item">
            <a href="/listUser"><img src="../static/img/nav/grid.png" alt="" /><p>用户账号管理</p></a>
          </li>
        <!--         <li class="nav-item">-->
        <!--           <a href="filemanager.html"><img src="img/nav/flm.png" alt="" /><p>File Manager</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="gallery.html"><img src="img/nav/gal.png" alt="" /><p>Gallery</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="icons.html"><img src="img/nav/icn.png" alt="" /><p>Icons</p></a>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="#"><img src="img/nav/err.png" alt="" /><p>Error Pages</p></a>-->
        <!--           <ul class="sub-nav">-->
        <!--            <li><a href="403.html">403 Page</a></li>-->
        <!--            <li><a href="404.html">404 Page</a></li>-->
        <!--            <li><a href="503.html">503 Page</a></li>-->
        <!--          </ul>-->
        <!--         </li>-->
        <!--         <li class="nav-item">-->
        <!--           <a href="typography.html"><img src="img/nav/typ.png" alt="" /><p>Typography</p></a>-->
        <!--         </li>-->
      </ul>
    </li>
  </ul>
</div>
<!-- 显示个人信息 -->
<div id="myMessage" class="modal">
  <div class="modal-content">
    <h2>用户信息</h2>
    <form id="dataForm23">
      <label>用户名称: {{.user.Username}}</label><br>
    </form>
    <button class="close-button" onclick="document.getElementById('myMessage').style.display='none'">关闭</button>
  </div>
</div>
<!--- CONTENT AREA -->

<div class="content container_12">
  <div class="ad-notif-success grid_12"><p>With the jQuery Flot plugin, your geeky analytical side will be pleased with the charting possibilities.</p></div>
  <div class="box grid_6">
    <div class="box-head"><h2>Line Chart</h2></div>
    <div class="box-content">
      <div id="flot-lines"></div>
    </div>
  </div>
  <div class="box grid_6">
    <div class="box-head"><h2>Bar Chart</h2></div>
    <div class="box-content">
      <div id="flot-bars"></div>
    </div>
  </div>
  <div class="box grid_6">
    <div class="box-head"><h2>Pie Chart</h2></div>
    <div class="box-content">
      <div id="flot-pie"></div>
    </div>
  </div>
  <div class="box grid_6">
    <div class="box-head"><h2>Realtime Chart</h2></div>
    <div class="box-content">
      <div id="flot-realtime"></div>
    </div>
  </div>
</div>

<div class="footer container_12">
  <p class="grid_12">Powered by Adminity Administration Interface</p>
</div>

<script> /* SCRIPTS */
$(function () {

  /* FOR THE LINE CHART */
  var sin = [], cos = [];
  for (var i = 0; i < 14; i += 0.5) {
    sin.push([i, Math.sin(i)]);
    cos.push([i, Math.cos(i)]);
  }
  var plot = $.plot($("#flot-lines"),
          [ { data: sin, label: "Green", color: "#71a100"}, { data: cos, label: "Blue", color: "#308eef" } ], {
            series: {
              lines: { show: true },
              points: { show: true }
            },
            grid: { hoverable: true },
            yaxis: { min: -1.2, max: 1.2 }
          });
  var previousPoint = null;
  $("#flot-lines").bind("plothover", function (event, pos, item) {
    if ($("#enablePosition:checked").length > 0) {
      var str = "(" + pos.x.toFixed(2) + ", " + pos.y.toFixed(2) + ")";
      $("#hoverdata").text(str);
    }
  });

  /* FOR THE BAR CHART */

  var d1 = [[0,5], [2,7], [4,10], [6,16], [8,19], [10,23], [12,30], [14,35], [16,40], [18,46], [20,54]];
  var d2 = [[1,6], [3,9], [5,11], [7,17], [9,21], [11,27], [13,33], [15,38], [17,43], [19,50]];
  $.plot($("#flot-bars"), [
    {
      data: d1,
      color: "#71a100",
      label: "Green",
      bars: { show: true }
    },
    {
      data: d2,
      color: "#308eef",
      label: "Blue",
      bars: { show: true }
    }
  ]);

  /* FOR THE PIE CHART */

  var piedata =
          [
            { label: "Green",  data: 50, color: "#71a100"},
            { label: "Blue",  data: 25, color: "#308eef"},
            { label: "Yellow",  data: 25, color: "#d1ca00"}
          ]

  $.plot($("#flot-pie"), piedata,
          {
            series: {
              pie: {
                show: true
              }
            },
            grid: {
              hoverable: true,
              clickable: true
            },
            redraw: true
          });

  /* FOR THE REALTIME CHART */

  var data = [], totalPoints = 300;
  function getRandomData() {
    if (data.length > 0)
      data = data.slice(1);

    // do a random walk
    while (data.length < totalPoints) {
      var prev = data.length > 0 ? data[data.length - 1] : 50;
      var y = prev + Math.random() * 10 - 5;
      if (y < 0)
        y = 0;
      if (y > 100)
        y = 100;
      data.push(y);
    }

    // zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data.length; ++i)
      res.push([i, data[i]])
    return res;
  }

  var updateInterval = 30;

  var options = {
    series: { shadowSize: 0 }, // drawing is faster without shadows
    yaxis: { min: 0, max: 100 },
    xaxis: { show: false }
  };
  var plot = $.plot($("#flot-realtime"), [ getRandomData() ], options);

  function update() {
    plot.setData([ getRandomData() ]);
    // since the axes don't change, we don't need to call plot.setupGrid()
    plot.draw();

    setTimeout(update, updateInterval);
  }

  update();

})
</script>


</body>
</html>